<template>
  <template v-if="type == 'text'">
    <van-field v-model="data" v-bind="props" v-on="on">
      <template #input v-if="$slots.input">
        <slot name="input"></slot>
      </template>
    </van-field>
  </template>
  <template v-else-if="type == 'select'">
    <InputeSelect v-model="data" :input-props="props" :options="props.options" v-on="on" />
  </template>
  <template v-else-if="type == 'area'">
    <InputArea v-model="data" :input-props="props" v-on="on" />
  </template>
  <template v-else-if="type == 'radio'">
    <van-field v-bind="props" v-on="on">
      <template #input>
        <slot name="input">
          <van-radio-group v-model="data" direction="horizontal">
            <van-radio :name="item.value" v-for="(item, index) in props.options" :key="index">{{
              item.label
            }}</van-radio>
          </van-radio-group>
        </slot>
      </template>
    </van-field>
  </template>
  <template v-else>
    <van-field v-bind="props" v-on="on">
      <slot name="input"></slot>
    </van-field>
  </template>
</template>
<script setup>
import InputeSelect from './InputeSelect.vue'
import InputArea from './InputArea.vue'

const emit = defineEmits(['update:modelValue'])
const _props = defineProps({
  modelValue: [String, Number],
  type: { type: String, default: 'text' },
  props: Object,
  on: Object,
})

const data = ref(_props.modelValue)

watch(
  () => _props.modelValue,
  () => {
    data.value = _props.modelValue
  }
)

watch(
  () => data.value,
  () => {
    emit('update:modelValue', data.value)
  }
)
</script>
<style lang="scss" scoped></style>
